<template>
    <div>
      
          <input id="gendersex" style="display:none" value="" />
          <p @click="show()">
                <input id="gender" style="border: none;margin-left: 0.5%;font-size: 0.4rem;"  placeholder="请选择性别"/>
                <span style="float: right;margin-right: 2%;">
                  <i class="iconfont icon-xiangyoujiantou"></i>
                </span>
          </p>
          
            <van-popup v-model="toReport" position="bottom" :style="{ height: '30%' }">
                  <van-radio-group v-model="checked" v-show="toReport" @click.stop="toReport = true">
                  <van-cell-group inset>
                      <van-cell v-for="(msg,index) in messageList" :key="index" :title="msg" clickable @click="checked = index">
                          <template #right-icon>
                              <van-radio :name="index"/>
                          </template>
                      </van-cell>
                  </van-cell-group> 
                <div class="reportBottom">
                    <button @click.stop="submit()">确认</button>
                </div>
              </van-radio-group>
            </van-popup>


    </div>
</template>

<script>

import Bristhday from './Bristhday.vue';
import axios from 'axios'
import jwtDecode from 'jwt-decode'
export default {
    name:'Gender',
    data() {
      return {
        toReport:false,
        messageList:["男","女"],
        checked:0
    }
  },
    methods:{
      
          show(){
            var gendersex  = document.getElementById("gendersex")
            console.log(gendersex.value)
            this.toReport = true
            if(gendersex.value=="性别:女"){
              console.log("1111")
              //设置某个被选中
              this.checked=1
            }else{
              this.checked=0
            }
            //点击出现弹窗 看个人信息性别给选择好
            
          },
           submit(){
             this.toReport=false
             console.log(this.messageList[this.checked])
             var gender = document.getElementById("gender");
             gender.value="性别:"+this.messageList[this.checked]
             //获取到更改的性别
            //  console.log(gender.value)
            //  调用修改用户个人信息的接口
            axios({
                url:'/users/updateUsers',
                method:'put',
                params:{
                    sex:this.messageList[this.checked],
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data=>{
                console.log(data)
                this.$router.go(0)

            }).catch(err=>{
                console.log(err)
            })
            


        }
    },
    mounted(){
      //首先调用接口查看性别
        let token=sessionStorage.getItem("token")
        const decode =  jwtDecode(token);
        console.log(decode)//exp   flag password sex userId username
        var userid  = document.getElementById("userid");
        userid.innerHTML=decode.userId;
        //查询用户信息
        axios({
            url:`/users/queryUsers?userId=${userid.innerHTML}`,
            method:'get',
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
            }
        }).then(data => {
              console.log(data.data.data)
      
              //遍历性别
             var gendersex = document.getElementById("gendersex");
             if(data.data.data.sex!=="男"||data.data.data.sex!=="女"){
               data.data.data.sex=="未知"
               gendersex.value="性别:"+data.data.data.sex
              // console.log(gendersex.value)
             }

             
        }).catch(err => {
            console.log(err)
        })
    },
  components:{
    Bristhday
  },
}
</script>

<style lang="less" scope>

    .reportBottom{
        padding: 0.4rem;
        text-align: center;
        button{
            float: right;
            background-color: white;
            border: solid 1px black;
            border-color: var(--themeColor);
            padding: 0.1rem 0.3rem;
            color: var(--themeColor);
        }
    }
</style>